
<template>
  <div class="pageDiv">
      <hotMvVue :getMvData="getpersonalizedMvData">
         <template #title>
           <h1 class="cartoonMV">推荐MV</h1>
        </template>
      </hotMvVue>
      <mvCardVue :getMvData="getnewMvData">
        <template #title>
           <h1 class="cartoonMV">最新MV</h1>
        </template>
      </mvCardVue>
      <mvCardVue :getMvData="getWYMvData">
        <template #title>
           <h1 class="cartoonMV">自出品MV</h1>
        </template>
      </mvCardVue>
  </div>
</template>


<script lang="ts">
import { defineComponent,onMounted,reactive,ref } from "@vue/runtime-core";
import {newMvStore,WYMvStore,personalizedMvStore} from '../../store'
import mvCardVue from "../../components/mvCard/mvCard.vue";
import hotMvVue from "../../components/mvCard/hotMv.vue";

  export default defineComponent({
     name:"app",
     components:{mvCardVue,hotMvVue},
     setup(){
      // 获取最新MV
      const getnewMvStore = newMvStore()
      const getnewMvData = ref();
      // 获取网易云的MV
      const getWYMvStore = WYMvStore()
      const getWYMvData = ref()
      // 获取推荐MV
      const getpersonalizedMvStore = personalizedMvStore()
      const getpersonalizedMvData = ref()

      onMounted(async()=>{
        getnewMvData.value = (await getnewMvStore.fetch(6)).data.data
        getWYMvData.value = (await getWYMvStore.fetch(6)).data.data
        getpersonalizedMvData.value = (await getpersonalizedMvStore.fetch(0)).data.result
        // console.log(getpersonalizedMvData.value)
      })

      return{
          getnewMvData,
          getWYMvData,
          getpersonalizedMvData
      }
     }
  })
</script>

<style scoped>

</style>
